<template>
  <div class="component">
    <div class="container-center container-color-stand">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">ASCII对照表</h2>
      </div>
      <div class="over-hidden">
        <div class="form-group">
          <label class="form-label">输入ASCII码查找</label>
          <input
            type="text" class="form-input"
            v-model="status"
          />
        </div>
        <table class="table table-bordered table-striped table-hover">
          <tbody>
            <tr>
              <th class="separateColor"><div style="width:70px">ASCII码</div></th>
              <th>控制字符</th>
            </tr>
            <tr v-for="item in computeCodes" :key="item.value + item.key">
              <td>{{ item.key }}</td>
              <td>{{ item.value }}</td>
            </tr>
          </tbody>
        </table>
        <table class="table table-bordered table-striped table-hover mt-lg">
          <tbody>
            <tr>
              <th>特殊字符解释</th>
            </tr>
            <tr v-for="item in letters" :key="item.value + item.key">
              <td>{{ item.value }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
/* 配色集合 */
export default {
  data () {
    return {
      // 状态码
      status: '',
      // 列表
      codes: [
        {
          'key': '0',
          'value': 'NUT'
        },
        {
          'key': '1',
          'value': 'SOH'
        },
        {
          'key': '2',
          'value': 'STX'
        },
        {
          'key': '3',
          'value': 'ETX'
        },
        {
          'key': '4',
          'value': 'EOT'
        },
        {
          'key': '5',
          'value': 'ENQ'
        },
        {
          'key': '6',
          'value': 'ACK'
        },
        {
          'key': '7',
          'value': 'BEL'
        },
        {
          'key': '8',
          'value': 'BS'
        },
        {
          'key': '9',
          'value': 'HT'
        },
        {
          'key': '10',
          'value': 'LF'
        },
        {
          'key': '11',
          'value': 'VT'
        },
        {
          'key': '12',
          'value': 'FF'
        },
        {
          'key': '13',
          'value': 'CR'
        },
        {
          'key': '14',
          'value': 'SO'
        },
        {
          'key': '15',
          'value': 'SI'
        },
        {
          'key': '16',
          'value': 'DLE'
        },
        {
          'key': '17',
          'value': 'DCI'
        },
        {
          'key': '18',
          'value': 'DC2'
        },
        {
          'key': '19',
          'value': 'DC3'
        },
        {
          'key': '20',
          'value': 'DC4'
        },
        {
          'key': '21',
          'value': 'NAK'
        },
        {
          'key': '22',
          'value': 'SYN'
        },
        {
          'key': '23',
          'value': 'TB'
        },
        {
          'key': '24',
          'value': 'CAN'
        },
        {
          'key': '25',
          'value': 'EM'
        },
        {
          'key': '26',
          'value': 'SUB'
        },
        {
          'key': '27',
          'value': 'ESC'
        },
        {
          'key': '28',
          'value': 'FS'
        },
        {
          'key': '29',
          'value': 'GS'
        },
        {
          'key': '30',
          'value': 'RS'
        },
        {
          'key': '31',
          'value': 'US'
        },
        {
          'key': '32',
          'value': '(space)'
        },
        {
          'key': '33',
          'value': '!'
        },
        {
          'key': '34',
          'value': '\''
        },
        {
          'key': '35',
          'value': '#'
        },
        {
          'key': '36',
          'value': '$'
        },
        {
          'key': '37',
          'value': '%'
        },
        {
          'key': '38',
          'value': '&'
        },
        {
          'key': '39',
          'value': ','
        },
        {
          'key': '40',
          'value': '('
        },
        {
          'key': '41',
          'value': ')'
        },
        {
          'key': '42',
          'value': '*'
        },
        {
          'key': '43',
          'value': '+'
        },
        {
          'key': '44',
          'value': ','
        },
        {
          'key': '45',
          'value': '-'
        },
        {
          'key': '46',
          'value': '.'
        },
        {
          'key': '47',
          'value': '/'
        },
        {
          'key': '48',
          'value': '0'
        },
        {
          'key': '49',
          'value': '1'
        },
        {
          'key': '50',
          'value': '2'
        },
        {
          'key': '51',
          'value': '3'
        },
        {
          'key': '52',
          'value': '4'
        },
        {
          'key': '53',
          'value': '5'
        },
        {
          'key': '54',
          'value': '6'
        },
        {
          'key': '55',
          'value': '7'
        },
        {
          'key': '56',
          'value': '8'
        },
        {
          'key': '57',
          'value': '9'
        },
        {
          'key': '58',
          'value': ':'
        },
        {
          'key': '59',
          'value': ';'
        },
        {
          'key': '60',
          'value': '<'
        },
        {
          'key': '61',
          'value': '='
        },
        {
          'key': '62',
          'value': '>'
        },
        {
          'key': '63',
          'value': '?'
        },
        {
          'key': '64',
          'value': '@'
        },
        {
          'key': '65',
          'value': 'A'
        },
        {
          'key': '66',
          'value': 'B'
        },
        {
          'key': '67',
          'value': 'C'
        },
        {
          'key': '68',
          'value': 'D'
        },
        {
          'key': '69',
          'value': 'E'
        },
        {
          'key': '70',
          'value': 'F'
        },
        {
          'key': '71',
          'value': 'G'
        },
        {
          'key': '72',
          'value': 'H'
        },
        {
          'key': '73',
          'value': 'I'
        },
        {
          'key': '74',
          'value': 'J'
        },
        {
          'key': '75',
          'value': 'K'
        },
        {
          'key': '76',
          'value': 'L'
        },
        {
          'key': '77',
          'value': 'M'
        },
        {
          'key': '78',
          'value': 'N'
        },
        {
          'key': '79',
          'value': 'O'
        },
        {
          'key': '80',
          'value': 'P'
        },
        {
          'key': '81',
          'value': 'Q'
        },
        {
          'key': '82',
          'value': 'R'
        },
        {
          'key': '83',
          'value': 'S'
        },
        {
          'key': '84',
          'value': 'T'
        },
        {
          'key': '85',
          'value': 'U'
        },
        {
          'key': '86',
          'value': 'V'
        },
        {
          'key': '87',
          'value': 'W'
        },
        {
          'key': '88',
          'value': 'X'
        },
        {
          'key': '89',
          'value': 'Y'
        },
        {
          'key': '90',
          'value': 'Z'
        },
        {
          'key': '91',
          'value': '['
        },
        {
          'key': '92',
          'value': '/'
        },
        {
          'key': '93',
          'value': ']'
        },
        {
          'key': '94',
          'value': '^'
        },
        {
          'key': '95',
          'value': '_'
        },
        {
          'key': '96',
          'value': '、'
        },
        {
          'key': '97',
          'value': 'a'
        },
        {
          'key': '98',
          'value': 'b'
        },
        {
          'key': '99',
          'value': 'c'
        },
        {
          'key': '100',
          'value': 'd'
        },
        {
          'key': '101',
          'value': 'e'
        },
        {
          'key': '102',
          'value': 'f'
        },
        {
          'key': '103',
          'value': 'g'
        },
        {
          'key': '104',
          'value': 'h'
        },
        {
          'key': '105',
          'value': 'i'
        },
        {
          'key': '106',
          'value': 'j'
        },
        {
          'key': '107',
          'value': 'k'
        },
        {
          'key': '108',
          'value': 'l'
        },
        {
          'key': '109',
          'value': 'm'
        },
        {
          'key': '110',
          'value': 'n'
        },
        {
          'key': '111',
          'value': 'o'
        },
        {
          'key': '112',
          'value': 'p'
        },
        {
          'key': '113',
          'value': 'q'
        },
        {
          'key': '114',
          'value': 'r'
        },
        {
          'key': '115',
          'value': 's'
        },
        {
          'key': '116',
          'value': 't'
        },
        {
          'key': '117',
          'value': 'u'
        },
        {
          'key': '118',
          'value': 'v'
        },
        {
          'key': '119',
          'value': 'w'
        },
        {
          'key': '120',
          'value': 'x'
        },
        {
          'key': '121',
          'value': 'y'
        },
        {
          'key': '122',
          'value': 'z'
        },
        {
          'key': '123',
          'value': '{'
        },
        {
          'key': '124',
          'value': '|'
        },
        {
          'key': '125',
          'value': '}'
        },
        {
          'key': '126',
          'value': '`'
        },
        {
          'key': '127',
          'value': 'DEL'
        }
      ],
      letters: [
        {
          key: 'STX 正文开始',
          value: 'STX 正文开始'
        },
        {
          key: 'CR 回车',
          value: 'CR 回车'
        },
        {
          key: 'CAN 作废',
          value: 'CAN 作废'
        },
        {
          key: 'ETX 正文结束',
          value: 'ETX 正文结束'
        },
        {
          key: 'SO 移位输出',
          value: 'SO 移位输出'
        },
        {
          key: 'EM 纸尽',
          value: 'EM 纸尽'
        },
        {
          key: 'EOY 传输结束',
          value: 'EOY 传输结束'
        },
        {
          key: 'SI 移位输入',
          value: 'SI 移位输入'
        },
        {
          key: 'SUB 换置',
          value: 'SUB 换置'
        },
        {
          key: 'ENQ 询问字符',
          value: 'ENQ 询问字符'
        },
        {
          key: 'DLE 空格',
          value: 'DLE 空格'
        },
        {
          key: 'ESC 换码',
          value: 'ESC 换码'
        },
        {
          key: 'ACK 承认',
          value: 'ACK 承认'
        },
        {
          key: 'DC1 设备控制1',
          value: 'DC1 设备控制1'
        },
        {
          key: 'FS 文字分隔符',
          value: 'FS 文字分隔符'
        },
        {
          key: 'BEL 报警',
          value: 'BEL 报警'
        },
        {
          key: 'DC2 设备控制2',
          value: 'DC2 设备控制2'
        },
        {
          key: 'GS 组分隔符',
          value: 'GS 组分隔符'
        },
        {
          key: 'BS 退一格',
          value: 'BS 退一格'
        },
        {
          key: 'DC3 设备控制3',
          value: 'DC3 设备控制3'
        },
        {
          key: 'RS 记录分隔符',
          value: 'RS 记录分隔符'
        },
        {
          key: 'HT 横向列表',
          value: 'HT 横向列表'
        },
        {
          key: 'DC4 设备控制4',
          value: 'DC4 设备控制4'
        },
        {
          key: 'US 单元分隔符',
          value: 'US 单元分隔符'
        },
        {
          key: 'LF 换行',
          value: 'LF 换行'
        },
        {
          key: 'NAK 否定',
          value: 'NAK 否定'
        },
        {
          key: 'DEL 删除',
          value: 'DEL 删除'
        }
      ]
    }
  },

  computed: {
    computeCodes () {
      let status = String(this.status).trim()
      let list = []
      this.codes.forEach(item => {
        if (!status || item.key.indexOf(status) > -1) {
          list.push(item)
        }
      })

      return list
    }
  }
}
</script>

<style lang="less">
.container-color-stand{
  ul {
    width: 20%;
    float: left;
    li {
      display: block;
      padding: 5px 10px;
      margin: 0 2px 2px 0;
      border-bottom-right-radius: 8px;
      cursor: pointer;
      a {
        text-decoration: none;
        word-wrap: break-word;
        span {
          display: block;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
